<template>
    <div class="w-goods">
        <div class="w-goods-header">
            <div class="w-goods-search">
                <div class="w-goods-search-input">
                    <img src="@/assets/images/search.png" alt="">
                    <input type="text" v-model="text" placeholder="请输入样板间名称进行搜索">
                </div>
                <div class="w-goods-search-text" @click="searchLp">搜索</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: ["wordKey"],
  data() {
    return {
      text: ""
    };
  },
  methods: {
    searchLp() {
      this.$emit("parentEvent", this.text);
    }
  },
  watch: {
    wordKey(value) {
      this.text = value;
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
.w-goods {
  .w-goods-search {
    margin-top: 24px;
    display: flex;
    line-height: 80px;
    .w-goods-search-input {
      height: 80px;
      background: #f7f7f7;
      border-radius: 14px;
      flex: 1;
      color: #7f7f7f;
      font-size: 28px;
      padding: 0;

      img {
        vertical-align: middle;
        margin: 18px 24px 26px 30px;
      }

      input {
        width: 520px;
        border: none;
        line-height: 80px;
        background: none;
        outline: none;
      }
    }
    .w-goods-search-text {
      padding-left: 24px;
      color: #5252a1;
      font-size: 32px;
    }
  }
}
</style>
